<template>
  <el-popover placement="bottom" width="200" trigger="manual" v-model="visible" @show="showPopover">
    <el-input
        placeholder="请输入内容"
        v-model="value"
        clearable
        @keyup.enter.native="confirm"
        ref="sInput"
    >
    </el-input>
    <el-button type="primary" size="mini" @click="confirm" style="margin-top:5px">搜索</el-button>
    <el-button size="mini" @click="resetData">重置</el-button>
  </el-popover>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      value: '',
      visible: false,
      iconColor: false
    }
  },
  props: {
    tableType: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: function () {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default: function () {
        return {
          label: 'label',
          value: 'value'
        }
      }
    }
  },
  watch: {
    defaultValue(newVal, oldVal) {
      const self = this
      self.value = newVal
    }

  },
  methods: {
    showPopover() {
      this.$nextTick(() => {
        this.$refs.sInput.focus()
      })
    },
    resetData() {
      console.log('reset')
      this.value = ''
      this.visible = false
      this.iconColor = false
      const self = this
      self.$emit('resetChange', {type: self.type, value: self.value, tableType: self.tableType})
    },
    closeOver() {
      this.visible = false
    },
    popClick(e) {
      // e.stopPropagation()
      this.visible = !this.visible
    },
    confirm() {
      this.visible = false
      this.iconColor = true
      const self = this
      if (self.value) {
        self.$emit('selectChange', {type: self.type, value: self.value, tableType: self.tableType})
      }
    }
  },
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        function clickHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e)
          }
        }

        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = clickHandler
        document.addEventListener('click', clickHandler)
      },
      update() {
      },
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
      }
    }
  }
}
</script>